// jsx -> tsx
// hello -> App
// 父组件回向子组件提供props  jsx  输出
// 子组件打工的，prop-types   拒绝裸奔
// 面向对象中，特性  父子组件间的约定  负责
// interface   接口

import * as React from 'react'
// 定义一个接口 ， 父子组件间用
// 子组件需要实现props规定的接口属性和方法
// ts  语法能力  面向对象的能力更牛逼
// ts  可以让我们java 一样
// 接口定义区域
interface Props{
    userName:String;
    age:number;
}
// 接口和组件结合  组件要实现接口
// props ? {}  空对象
// 泛型
// React.Fc  类型定义由@type/react 提供 
 const HelloComponent:React.FC<Props>=(props)=>{
    return(
        <h2>
            hello user:{props.userName}<br />
            年纪:{props.age}
        </h2>
    )
}

export default HelloComponent